<template>
  <div class="login-page">
    <div class="title">水老板の秘密基地</div>
    <van-form ref="ContractForm" label-width="4em">
      <van-cell-group class="mingyue-form-item">
        <van-field v-model="form.mobile" type="tel" label="手机号：" />
      </van-cell-group>
      <van-cell-group class="mingyue-form-item">
        <van-field v-model="form.passwd" type="password" label="密码：" />
      </van-cell-group>
      <van-cell-group class="mingyue-form-item verify-code">
        <van-field v-model="form.code" label="验证码："> </van-field>
        <Identity :identifyCode="identifyCode" :fontSizeMin="30" :contentHeight="44" @click.native="createCode" />
      </van-cell-group>
      <van-button type="primary" :loading="loginLoading" block class="login-btn" @click="login">登录</van-button>
    </van-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { apiAdminLogin } from '@/api/user'
import { showToast } from 'vant'
import store from '@/stores'
import { useRouter } from 'vue-router'
import Identity from './identity.vue'

const letter = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'

const router = useRouter()

const form = ref({
  mobile: '',
  passwd: '',
  code: ''
})
const loginLoading = ref(false)
const identifyCode = ref('')

const { setToken, setUserInfo } = store.user

// 生成一个随机数
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
}

// 生成验证码
function createCode() {
  identifyCode.value = ''
  for (let i = 0; i < 4; i++) {
    const randomIndex = randomNum(0, letter.length - 1)
    identifyCode.value = identifyCode.value + letter[randomIndex]
  }
}

const login = async () => {
  if (form.value.mobile === '') {
    showToast({
      message: '请输入手机号',
      position: 'top'
    })
    return
  }
  if (form.value.passwd === '') {
    showToast({
      message: '请输入密码',
      position: 'top'
    })
    return
  }
  if (form.value.code === '') {
    showToast({
      message: '请输入验证码',
      position: 'top'
    })
    return
  }
  if (form.value.code.toLowerCase() !== identifyCode.value.toLowerCase()) {
    showToast({
      message: '验证码错误',
      position: 'top'
    })
    return
  }
  loginLoading.value = true
  apiAdminLogin({
    mobile: form.value.mobile,
    passwd: form.value.passwd
  })
    .then((res) => {
      const { id, mobile, userName, realName, token } = res
      setToken(token)
      setUserInfo({
        id,
        mobile,
        userName,
        realName,
        type: 'admin'
      })
      router.replace({
        path: '/index'
      })
    })
    .catch((e) => {
      form.value.code = ''
      createCode()
    })
    .finally(() => {
      loginLoading.value = false
    })
}

onMounted(() => {
  createCode()
})
</script>

<style lang="less" scoped>
.login-page {
  padding: 40% 15px 0;
  .title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
  }
  .mingyue-form-item {
    margin-bottom: 20px;
    :deep(.van-field__button) {
      display: flex;
    }
    &.verify-code {
      display: flex;
      align-items: center;
    }
  }
  .login-btn {
    margin-top: 50px;
  }
}
</style>
